<template>
    <div>
        <!-- <TableSearch :query="query" :options="searchOpt" :search="handleSearch" /> -->
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total"
                :delFunc="handleDelete" :changePage="changePage" :change-page-size="changePageSize"  :currentPage="page.page" :pageSize="page.page_size">
                <template #c_status="{rows}">
                    <el-tag v-if="rows.c_status == 1" type="success">已处理</el-tag>
                    <el-tag v-else-if="rows.c_status == 0" type="danger">未处理</el-tag>
                </template>
                <template #operator="{rows}">
                    <el-button v-if="rows.c_status == 0"  type="primary" size="small" @click="handleEdit(rows)">去处理</el-button>
                    <span v-else></span>
                </template>
            </TableCustom>
        </div>
        <el-dialog title="处理投诉" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, RefreshLeft } from '@element-plus/icons-vue';
import { query_complaint_list, to_examine_complaint } from '@/api';
import TableCustom from '@/components/table-custom.vue';
import { FormOption, FormOptionList } from '@/types/form-option';


// 表格相关
let columns = ref([
    { prop: 'user_telphone', label: '租户电话' },
    // { prop: 'c_user_code', label: '租户' },
    { prop: 'c_complaint_content', label: '投诉内容', width: 500 },
    { prop: 'c_complaint_time', label: '投诉时间' },
    { prop: 'c_return_result', label: '处理结果' },
    { prop: 'c_return_time', label: '处理时间' },
    { prop: 'c_status', label: '是否处理' },
    { prop: 'operator', label: '操作', width: 250 },
])
const page = reactive({
    page: 1,
    page_size: 10,
    total: 0,
})
const tableData = ref([]);
const getData = async () => {
    const res = await query_complaint_list({page: page.page, page_size: page.page_size})
    tableData.value = res.data.data_list;
    page.total = res.data.total;
};
getData();

const changePage = (val: number) => {
    console.log(val)
    page.page = val;
    getData();
};
const changePageSize = (val: number) => {
    page.page_size = val;
    getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
    labelWidth: '150px',
    span: 20,
    list: [
        { type: 'input', label: '租户电话', prop: 'user_telphone', required: false, placeholder: '请选择上级合作管理员', disabled: true },
        { type: 'textarea', label: '投诉内容', prop: 'c_complaint_content', required: false, placeholder: '请输入合作管理员名称', disabled: true, rows: 5 },
        { type: 'input', label: '投诉时间', prop: 'c_complaint_time', required: false, placeholder: '请输入联系人姓名', disabled: true },
        { type: 'textarea', label: '处理', prop: 'c_return_result', required: true, placeholder: '请输入处理内容' },
    ]
})
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row) => {
    rowData.value = { ...row };
    isEdit.value = true;
    visible.value = true;
};
const updateData = async(value) => {
    const res = await to_examine_complaint({
        c_id: value.c_id,
        c_return_result: value.c_return_result
    })
    if (res.code == '1000') {
        ElMessage.success('处理成功')
        closeDialog();
        getData();
    }

};
const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};


// 删除相关
const handleDelete = (row) => {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        type: 'warning'
    })
        .then(async () => {
        })
        .catch(() => { });
    
}

const cancelOrder = (row) =>  {
    
}
</script>

<style scoped></style>